<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生信息管理</title>
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/js.cookie.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <script src="js/bootstrap.min.js" ></script>
    <script src="js/bootstrap-datepicker.min.js"></script>
    <link href="css/bootstrap-datepicker.min.css" rel="stylesheet">
    <script>

        var pageNum = 1;
        var pageSize = 5; // 每页显示5条数据

        $(document).ready(function() {

            // 使用jQuery .on() 方法绑定分页点击事件
            $(document).on('click', '#changePage', function() {
                var page = $(this).data('page');
                pageNum = page;
                searchList();
            });

            var role = Cookies.get('role');

            // 生成分页控件
            function generatePagination(pageIndex, totalPages) {
                if (pageIndex > totalPages) {
                    changePage(totalPages);
                    return;
                }
                var paginationHtml = '<nav><ul class="pagination">';
                var startPage = Math.min(1, pageIndex);
                var endPage = Math.min(totalPages);

                for (var i = startPage; i <= endPage; i++) {
                    if (i === pageIndex) {
                        paginationHtml += '<li class="page-item active"><span class="page-link">' + i + '</span></li>';
                    } else {
                        paginationHtml += '<li class="page-item"><a class="page-link" href="javascript:void(0);" id = "changePage" data-page="' + i + '">' + i + '</a></li>';
                    }
                }
                paginationHtml += '</ul></nav>';
                console.log(paginationHtml)
                $('#pagination').html(paginationHtml);
            }

            // 查询列表
            function searchList() {
                var name = $('#nameSearch').val();
                $.ajax({
                    url: '/api/studentinfo/list',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({name: name, pageNum: pageNum, pageSize: pageSize}),
                    success: function (response) {
                        var data = response.data;
                        var tableContent = '';
                        data.data.forEach(function(item) {
                            tableContent += '<tr>' +
                                '<td>' + item.id + '</td>' +
                                '<td>' + item.name + '</td>' +
                                '<td>' + item.sex + '</td>' +
                                '<td>' + item.birth + '</td>' +
                                '<td>' + item.address + '</td>' +
                                '<td>' + item.phone + '</td>' +
                                '<td>' +
                                // '<button class="btn btn-info btnDetail" data-id="' + item.id + '">详情</button> ' +
                                '<button class="btn btn-primary btnEdit" data-id="' + item.id + '">编辑</button> ' +
                                '<button class="btn btn-danger btnDelete" data-id="' + item.id + '">删除</button></td>' +
                                '</tr>';
                        });
                        $('#studentInfoList').html(tableContent);
                        generatePagination(response.data.pageIndex, response.data.pageTotal); // 生成分页控件
                    }
                });
            }
            searchList();
            // 绑定查询事件
            $('#searchBtn').click(searchList);

            // 绑定改变页码事件
            $(document).on('click', '.btnEdit', function() {
                var id = $(this).data('id');
                $.ajax({
                    url: '/api/studentinfo/detail',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ id: id }),
                    success: function(response) {
                        var studentInfo = response.data;
                        $('#editId').val(studentInfo.id);
                        $('#editName').val(studentInfo.name);
                        $('#editSex').val(studentInfo.sex);
                        $('#editBirth').val(studentInfo.birth);
                        $('#editAddress').val(studentInfo.address);
                        $('#editPhone').val(studentInfo.phone);
                        $('#editModal').modal('show');
                    },
                    error: function() {
                        alert('获取学生详情失败');
                    }
                });
            });


            // 初始化日期选择器
            $('.datepicker').datepicker({
                format: 'yyyy-mm-dd',
                autoclose: true
            });

            // 加载性别下拉菜单数据
            loadSexDropdownData();

            // 绑定新增事件
            $('#addModal').on('submit', function(e) {
                e.preventDefault();
                var studentInfo = {
                    name: $('#addName').val(),
                    sex: $('#addSex').val(),
                    birth: $('#addBirth').val(),
                    address: $('#addAddress').val(),
                    phone: $('#addPhone').val()
                };
                $.ajax({
                    url: '/api/studentinfo/add',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(studentInfo),
                    success: function() {
                        searchList(); // 刷新列表
                        $('#addModal').modal('hide'); // 关闭模态框
                    },
                    error: function() {
                        alert('添加学生信息失败');
                    }
                });
            });

            // 绑定编辑事件
            $(document).on('click', '.btnEdit', function() {
                var id = $(this).data('id');
                $.ajax({
                    url: '/api/studentinfo/detail',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ id: id }),
                    success: function(response) {
                        var studentInfo = response.data;
                        $('#editId').val(studentInfo.id);
                        $('#editName').val(studentInfo.name);
                        $('#editSex').val(studentInfo.sex);
                        $('#editBirth').val(studentInfo.birth);
                        $('#editAddress').val(studentInfo.address);
                        $('#editPhone').val(studentInfo.phone);
                        $('#editModal').modal('show');
                    },
                    error: function() {
                        alert('获取学生详情失败');
                    }
                });
            });

            // 绑定编辑模态框的更新事件
            $('#editModal').on('submit', function(e) {
                e.preventDefault();
                var studentInfo = {
                    id: $('#editId').val(),
                    name: $('#editName').val(),
                    sex: $('#editSex').val(),
                    birth: $('#editBirth').val(),
                    address: $('#editAddress').val(),
                    phone: $('#editPhone').val()
                };
                $.ajax({
                    url: '/api/studentinfo/update',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(studentInfo),
                    success: function() {
                        searchList(); // 刷新列表
                        $('#editModal').modal('hide'); // 关闭模态框
                    },
                    error: function() {
                        alert('更新学生信息失败');
                    }
                });
            });

            // 绑定删除事件
            $(document).on('click', '.btnDelete', function() {
                var id = $(this).data('id');
                $.ajax({
                    url: '/api/studentinfo/delete',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ id: id }),
                    success: function() {
                        searchList(); // 刷新列表
                    },
                    error: function() {
                        alert('删除学生信息失败');
                    }
                });
            });

            function loadSexDropdownData() {
                $('#addSex, #editSex').empty().append($('<option>').val('').text('请选择性别'));
                $('#addSex, #editSex').append($('<option>').val('男').text('男'), $('<option>').val('女').text('女'));
            }

            // ... 省略其他代码 ...

            // 绑定删除事件
            $(document).on('click', '.btnDelete', function() {
                var id = $(this).data('id');
                $('#deleteId').val(id);
                $('#deleteModal').modal('show');
            });

            // 确认删除按钮事件
            $('#confirmDelete').click(function() {
                var id = $('#deleteId').val();
                $.ajax({
                    url: '/api/studentinfo/delete',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ id: id }),
                    success: function() {
                        searchList(); // 刷新列表
                        $('#deleteModal').modal('hide'); // 关闭模态框
                    },
                    error: function() {
                        alert('删除学生信息失败');
                    }
                });
            });

            // ... 省略其他代码 ...

        });
    </script>
    <script>
        $(function () {
            $('#header').load('admin_header.html');
        })
    </script>
</head>
<body>
<div id="header"></div>
<div class="container">
    <h2>学生信息管理</h2>
    <div class="input-group">
        <input type="text" class="form-control" id="nameSearch" placeholder="学生姓名">
        <span class="input-group-btn">
            <button class="btn btn-default" id="searchBtn">查询</button>
        </span>
    </div>
    <button class="btn btn-success" id="addBtn" data-toggle="modal" data-target="#addModal">新增学生</button>
    <table class="table table-striped" >
        <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>性别</th>
            <th>出生日期</th>
            <th>地址</th>
            <th>电话</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="studentInfoList">
        <!-- 学生信息列表将通过AJAX动态填充 -->
        </tbody>
    </table>
    <div id="pagination" class="pagination-container"></div>
</div>

<!-- 新增学生模态框 -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                <h4 class="modal-title">新增学生</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="addName">姓名</label>
                        <input type="text" class="form-control" id="addName" placeholder="姓名" required>
                    </div>
                    <div class="form-group">
                        <label for="addSex">性别</label>
                        <select class="form-control" id="addSex" required>
                            <option value="">请选择性别</option>
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="addBirth">出生日期</label>
                        <input type="text" class="form-control datepicker" id="addBirth" placeholder="出生日期" required>
                    </div>
                    <div class="form-group">
                        <label for="addAddress">地址</label>
                        <input type="text" class="form-control" id="addAddress" placeholder="地址" required>
                    </div>
                    <div class="form-group">
                        <label for="addPhone">电话</label>
                        <input type="text" class="form-control" id="addPhone" placeholder="电话" required>
                    </div>
                    <button type="submit" class="btn btn-primary">确定</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 编辑学生模态框 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                <h4 class="modal-title">编辑学生信息</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <input type="hidden" class="form-control" id="editId">
                        <label for="editName">姓名:</label>
                        <input type="text" class="form-control" id="editName" placeholder="姓名" required>
                    </div>
                    <div class="form-group">
                        <label for="editSex">性别:</label>
                        <select class="form-control" id="editSex" required>
                            <option value="">请选择性别</option>
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="editBirth">出生日期:</label>
                        <input type="text" class="form-control datepicker" id="editBirth" placeholder="出生日期" required>
                    </div>
                    <div class="form-group">
                        <label for="editAddress">地址:</label>
                        <input type="text" class="form-control" id="editAddress" placeholder="地址" required>
                    </div>
                    <div class="form-group">
                        <label for="editPhone">电话:</label>
                        <input type="text" class="form-control" id="editPhone" placeholder="电话" required>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">更新</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 删除学生模态框 -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                <h4 class="modal-title">删除学生信息</h4>
            </div>
            <div class="modal-body">
                <p>您确定要删除这个学生的信息吗？</p>
                <input type="hidden" id="deleteId">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" id="confirmDelete">确认删除</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>
